Create a same as kizhelp.xyz website in wapkiz part:- 01

my name is Sudip kumar roy.

i am from bangladesh.my mother tongue is bengla.i am not good in english but i am try to give a full tutorilas in english.

excuise me for some of mistake please.

Now i am showing how to create a wapkiz website same as kizhelp.xyz.

anyone dont like my tuitorials i say you avoid my topic.

i am only learning wapkiz new user.

they are create full proffesional looking wapkiz website.

no more extra talking.

lets start and follow me.

step: -01

First you visit wapkiz.com

create your account.

click sing up form and full fill up all form.

must give your valid email and verify your email account.

i know that all user easy for sign up.

so, i dont need showing how to create wapkiz account.

wapkiz give us free hosting 25gb and free sub domain.

example:-

yourname.wapkiz.mobi

yourname.wapkiz.com

yourname.wapkiz.site

etc.

chack your domain name and claim first as your choice.

create your account successful then login your account and go to pannel mode.

a page will be open. its main controlling page.

find out meta header and go to this option.

open a meta header box.i give a code.

copy and pastal this code in this box.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Yazen - Personal Portfolio"> <meta name="keywords" content="Html, Css, jQuery, JavaScript, Yazen, responsive, onepage, personal, Portfolio, design, creative, template">  <title>SMsudipBD - Personal Portfolio</title>  <link rel="icon" href="http://dl4.wapkizfile.info/ddl/2e77b91ce627ccb79ffd2a9d8535f69d/smsudipbd+wapkiz+com/logo-icon-sudip-(smsudipbd.wapkiz.com).png">  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster+Two&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster+Two|Sofia&display=swap">   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  </head> <style type="text/css"> /*---=================body=====================---*/ body { margin:auto; font-family: 'Sofia', cursive; font-size: 15px; font-weight: 400; line-height: 1.5; color: #787878; text-align: left; background-color: #fff; transition: 2s; letter-spacing: .1em; max-width: 1100px; background-repeat: repeat-x; background-attachment: scroll; } a:link, a:visited { color: #00bae8; text-decoration: none; } a:hover { color: #ff12cf; text-decoration: none; } h2 { font-size: 15px; } /*---=================body end=====================---*/ h3 { font-size: 20px; } input[type="submit" i] { align-items: flex-start; text-align: center; cursor: default; color: buttontext; background-color: buttonface; box-sizing: border-box; padding: 2px 6px 3px; border-width: 2px; border-style: outset; border-color: buttonface; border-image: initial; padding: 1px 6px; margin: 1px; color: #6d6d6d; background-color: #fbfbfb; border: 1px solid #e3e3e3; vertical-align: top; } .social { background-color: #696969; } .menu, .news { background-image: url(/tmn.gif); background-repeat: repeat-x; background-position: 50% top; margin-top: 1px; margin-bottom: 1px; padding: 2px; border: 1px solid #e1e1e1; } .btn { border: 1px solid #32b6ce; background: #32b6ce url("/nfooter.gif") no-repeat; font-weight: 700; padding: 2px; color: #fff; font-size: 11px; margin-left: 2px; vertical-align: top; } .header, .footer { background-image: url(images/header.gif); color: #f2f2f2; background-color: #686868; background-repeat: repeat-x; background-position: 50% top; margin-bottom: 1px; padding: 2px; border-top: 1px solid #7f8080; border-bottom: 1px solid #7f8080; } .header { border-collapse: collapse; background: #555; color: #e9e9e9; margin-bottom: 0; padding: 2px; } .bmenu, .phdr, .hdr { color: #fff; background-color: #84e2f8; background-image: url(images/bmenu.gif); background-repeat: repeat-x; background-position: 50% top; margin-top: 1px; margin-bottom: 1px; padding: 2px; border: 1px solid #68e1ff; } .phdr, .phdrl { border: 1px solid #999; font-size: 13px; margin-bottom: 1px; color: #fff; padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px; } #text-colorful { font-family: 'Noto Sans',Solaimanlipi,Kalpurush,Siyam rupali; font-size: 20px; font-weight: 1000; text-transform: uppercase; background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #ff12cf), color-stop(0.15, #ff930c), color-stop(0.3, #22f), color-stop(0.45, #ff12cf), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); color: transparent; -webkit-background-clip: text; } #content-wrapper {width: 100%;margin:auto;} .plus-left { border: 1px solid #bbb; width: 24%; vertical-align: top; } .plus-center { width: 53%; vertical-align: top; border: 1px solid #bbb; } .plus-right { border: 1px solid #bbb; width: 23%; vertical-align: top; } .nfooter { color: #fff; background-color: #32b6ce; background-image: url(images/nfooter.gif); background-repeat: no-repeat; background-position: right 50%; text-align: left; padding: 3px; } .nfooter a:link, .nfooter a:visited, .nfooter a:active { color: #fff; background-repeat: no-repeat; background-position: right 50%; text-align: left; padding: 3px; } .list2, .c { background-color: #fdfdfd; margin-top: 1px; margin-bottom: 1px; padding: 2px; border: 1px solid #ececec; } .list1, .b { background-color: #f6f6f6; margin-top: 1px; margin-bottom: 1px; padding: 2px; border: 1px solid #e7e7e7; } .sub { border-top: 1px dotted #cacaca; font-size: x-small; margin-top: 4px; } .gray { color: #979797; } .mainblok { border: 1px solid #32b6ce; margin: auto; padding: 0; margin-left: 0; margin-right: 0; margin-top: 0px; margin-bottom: 0; } .avatar img{transition:all 15s ease;-webkit-transition:all 15s ease;-moz-transition:all 15s ease;transition-delay:5s;-webkit-transition-delay:5s;-moz-transition-delay:5s;background-color:#fff;max-width:143px;border-radius:5px;margin:1px 3px 3px 1px;padding:3px;border:1px solid #d4d4d4;box-shadow:3px 3px 3px #8a8a8a;transform:rotate(-20deg);-moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg)}.omenu{color:#333;border:1px solid #e6b868;background-color:#fff5bc;margin:4px 0 0;padding:2px 4px}.avatar img:hover{transition:all 3s ease;-webkit-transition:all 3s ease;-moz-transition:all 3s ease;transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);position:relative}.avatar{} .maintxt { border: 1px solid #dadada; background: #fff; color: #989898; margin: 4px; padding: 5px; } .mainbox { padding-left: 5px;padding-right: 5px;padding-top: 5px; } .add { background-image: url("http://dl4.wapkizfile.info/ddl/6ec33bea0dbf212df74904d302c80905/kizhelp+wapkiz+com/add-(kizhelp.wapkiz.com).jpg"); width: 23.6px; height: 23.6px; float: right; border: 2px solid #32b6ce; border-radius: 20px; } textarea { -webkit-appearance: textarea; background-color: white; -webkit-rtl-ordering: logical; flex-direction: column; resize: auto; cursor: text; white-space: pre-wrap; overflow-wrap: break-word; border-width: 1px; border-style: solid; border-color: initial; border-image: initial; padding: 2px; width: 90%; padding: 3px; color: #6d6d6d; background-color: #fbfbfb; border: 1px solid #e3e3e3; } input { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 400 13.3333px Arial; padding: 1px 0px; margin: 1px; vertical-align: top; color: #6d6d6d; background-color: #fbfbfb; border: 1px solid #e3e3e3; } .gmenu { color: #75bf00; background-color: #fafff0; background-image: url(images/gmenu.gif); background-repeat: repeat-x; background-position: 50% top; margin-top: 1px; margin-bottom: 1px; padding: 2px; border: 1px solid #d4eba1; } .currentpage { background-color: #edebeb; border: 1px solid #ccc; padding: 0 5px; } .rmenu { background-color: #fff0f0; background-image: url(images/rmenu.gif); background-repeat: repeat-x; background-position: 50% top; margin-top: 1px; margin-bottom: 1px; padding: 2px; border: 1px solid #ffd0d0; margin: 1px 0; } .red, .red a:link, .red a:visited { color: #ff0a00; } p { margin-top: 6px; margin-bottom: 6px; } .green { color: #66bd00; } .topmenu { background-color: #dadde0; font-size: x-small; padding: 2px 4px 3px; margin-bottom: 1px; border-bottom: 1px solid #a8b1bb; border-right: 1px solid #e1e4e8; border-left: 1px solid #e1e4e8; } .avamenu { background-color: #dadde0; font-size: x-small; margin-bottom: 1px; border-bottom: 1px solid #a8b1bb; border-right: 1px solid #e1e4e8; border-left: 1px solid #e1e4e8; padding-left: 1px; padding-right: 1px; padding-top: 2px; padding-bottom: 3px; } .forumtxt { background-color: #fff; color: #333; padding: 1px; margin: 2px; white-space: pre-line; } .forumb { background-color: #e9e9e9; border: none; margin: 0; padding: 2px 5px 1px 4px; } ._2p3a {min-width: 180px; width: 100% !important;} .list-2 { background: #fff; padding: 5px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #000; font-size: 15px; } .menus {border: 1px solid #84e2f8;} </style></html>

now,

click edit meta tag

you are done meta header

again go to main controling page and

find header page. its id (-1)

nb: we are working first header and footer first.

go to header page.you are showing a white page.

we are also desing this page.

header page always showing every page.

you can show a option menu bar in top up.

here you find out a option.....

html / tag code.

click it..

you can show a box..

now i am give some code.you copy this code and pastal this code in box.

Div class:

none

Visibility Access:

all access

Visibility Browser:

all browser

and click edit

again go to

html / tag code.

and pastal this code

<div class="hidden-md hidden-lg"><table width="100%" valign="top" class="nfooter"><tbody><tr><td width="90%" valign="top" align="left"><a href="/"><h1><img src="http://dl4.wapkizfile.info/ddl/1bb87d41d15fe27b500a4bfcde01bb0e/kizhelp+wapkiz+com/logo-(kizhelp.wapkiz.com).png" width="100px" style="width: 60%; max-width: 150px;"></h1></a></td><td width="10%" align="right">Hi, Guest ·EN <img src="https://waphelp.xyz/images/flags/en.gif" alt=""> </td></tr></tbody></table><div class="menu" align="center"><a href="/site-0.html">Forum</a> | <a href="/site_download.html">Downloads</a> | <a href="/site-news.html">News</a> | <a href="/site-login.html">Login</a> | <a href="/site-registration.html">Registration</a></div></div>

Div class:

none

Visibility Access:

guest

Visibility Browser:

all browser

and click edit

again go to

html / tag code.

and pastal this code

<div class="hidden-md hidden-lg"><table width="100%" valign="top" class="nfooter"><tbody><tr><td width="90%" valign="top" align="left"><a href="/"><h1><img src="http://dl4.wapkizfile.info/ddl/1bb87d41d15fe27b500a4bfcde01bb0e/kizhelp+wapkiz+com/logo-(kizhelp.wapkiz.com).png" width="100px" style="width: 60%; max-width: 150px;"></h1></a></td><td width="10%" align="right"><a href="/site-profile.html?to-user=:my_name:">:my_name:</a> ·EN <img src="https://waphelp.xyz/images/flags/en.gif" alt=""> </td></tr></tbody></table><div class="menu" align="center"><a href="/site-profile.html?to-user=:my_name:">Parsonal</a> | <a href="/site-forum.html">Forum</a> | <a href="/site-download.html">Downloads</a> | <a href="/site-news.html">News</a> | <a href="/site-message.html">Inbox</a> | <a href="/site_logout.html">Log Out</a></div></div>

Div class:

none

Visibility Access:

user

Visibility Browser:

all browser

and click edit

again go to

html / tag code.

and pastal this code

<div class="hidden-xs hidden-sm"><div class="menu"><table class="hlogo" width="100%"><tr height="45px"><td width="20%"><a href="http://kizhelp.wapkiz.com"><h1><img src="http://dl4.wapkizfile.info/ddl/1bb87d41d15fe27b500a4bfcde01bb0e/kizhelp+wapkiz+com/logo-(kizhelp.wapkiz.com).png" style=" max-width: 210px;"/></h1></a></td><td class="menu" width="40%"><a href="/forum">Forum</a><a href="/download">Downloads</a><a href="/news">News</a><a href="/site-login.html">Login</a><a href="/site-registration.html">Registration</a></td><td class="menu" width="40%"><form action="site_login.html" method="post"><input class="log" value="username" name="user_name_" maxlength="20" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="text" class="inputusername" /><input class="log" maxlength="20" name="password_" value="password" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" type="password" /><input value="Login" class="btn" type="submit" name="login_user" /> <input class="log" name="mem" value="1" type="checkbox" /> Remember me | <a href="/site_ipass.html">Forgot password?</a></form></td></tr></table></div></div></div>

Div class:

none

Visibility Access:

guest

Visibility Browser:

all browser

and click edit

again go to

html / tag code.

and pastal this code

<div class="hidden-xs hidden-sm"><div class="menu"><table class="hlogo" width="100%"><tr height="45px"><td width="20%"><a href="http://kizhelp.wapkiz.com"><h1><img src="http://dl4.wapkizfile.info/ddl/1bb87d41d15fe27b500a4bfcde01bb0e/kizhelp+wapkiz+com/logo-(kizhelp.wapkiz.com).png" style=" max-width: 210px;"/></h1></a></td><td class="menu" width="40%"><a href="https://www.waphelp.xyz/users/profile.?act=office">Personal</a><a href="/forum">Forum</a><a href="/download">Downloads</a><a href="/news">News</a><a href="/site_logout.html">Logout</a></td><td class="menu" width="40%"><form action="/site-searching.html" method="get"><input name="to-search" type="checkbox" value="1" />Forum Topic <input type="text" value="" name="to-search" /><input class="btn" type="submit" value="Search" name="submit" /></form></td></tr></table></div></div></div>

Div class:

none

Visibility Access:

user

Visibility Browser:

all browser

and click edit

again go to

html / tag code.

and pastal this code

<div class="hidden-xs hidden-sm"><div class="header"> Hi, Guest!<div class="phdr" style="padding: 4px;"><center>WE ARE THE WapKiz Master WE LEARN WE TEACH OTHERS</center></div> ·<a href="">EN <img src="https://www.waphelp.xyz/images/flags/en.gif" alt=""/> </a><div class="phdr"><center></center></div><center>-- + </center><div class="phdr" style="padding: 4px;"><center><h2><!...............good................................../!><div id="text-colorful"><script type="text/javascript"> document.write("<center><font-size=20px;'>"); var day = new Date(); var hr = day.getHours(); if (hr >= 0 && hr < 12) { document.write("Good Morning!"); } else if (hr == 12) { document.write("Good Noon!"); } else if (hr >= 12 && hr <= 17) { document.write("Good Afternoon!"); } else { document.write("Good Evening!"); } document.write("</center>"); </script></div><!...............good end................................../!></h2></center><div></div></div></div><script type="text/javascript">var d = new Date();document.getElementById("year").innerHTML = d.getFullYear();var d = new Date();document.getElementById("month").innerHTML = d.getMonth() + 1;var d = new Date();document.getElementById("date").innerHTML = d.getDate();var myVar = setInterval(function () { myTimer() }, 1000); function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("time-now").innerHTML = t; }</script></div>

Div class:

none

Visibility Access:

guest

Visibility Browser:

all browser

and click edit

again go to

html / tag code.

and pastal this code

<div class="hidden-xs hidden-sm"><div class="header"> Hi, :my_name:!<div class="phdr" style="padding: 4px;"><center>WE ARE THE WapKiz Master WE LEARN WE TEACH OTHERS</center></div> ·<a href="">EN <img src="https://www.waphelp.xyz/images/flags/en.gif" alt=""/> </a><div class="phdr"><center></center></div><center>-- + </center><div class="phdr" style="padding: 4px;"><center><h2><!...............good................................../!><div id="text-colorful"><script type="text/javascript"> document.write("<center><font-size=20px;'>"); var day = new Date(); var hr = day.getHours(); if (hr >= 0 && hr < 12) { document.write("Good Morning!"); } else if (hr == 12) { document.write("Good Noon!"); } else if (hr >= 12 && hr <= 17) { document.write("Good Afternoon!"); } else { document.write("Good Evening!"); } document.write("</center>"); </script></div><!...............good end................................../!></h2></center><div></div></div></div><script type="text/javascript">var d = new Date();document.getElementById("year").innerHTML = d.getFullYear();var d = new Date();document.getElementById("month").innerHTML = d.getMonth() + 1;var d = new Date();document.getElementById("date").innerHTML = d.getDate();var myVar = setInterval(function () { myTimer() }, 1000); function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("time-now").innerHTML = t; }</script></div>

Div class:

none

Visibility Access:

user

Visibility Browser:

all browser

and click edit

all code pc/mobile version auto detected and viewed different design.

so, dont edit other by not working.

wait for next tutorilas.

any problem comment here.

demo this site; DEMO OF KIZHELP WAPKIZ SITE